<template>
	<div id="newRoleDetails" class="newRoleDetails">
		<group>
			<cell class="newLessonCell" title="角色" :value="role_name" is-link @click.native="showPopup=true"></cell>
			<!--<x-input placeholder="角色" v-model="role_name"></x-input>
			<x-textarea :max="200" name="description" placeholder="角色介绍" v-model="role_description"></x-textarea>-->
			<x-input required title="描述" placeholder="角色描述" v-model="role_description"></x-input>
		</group>

		<div class="error" v-show="error">{{error}}</div>

		<div v-transfer-dom>
			<popup v-model="showPopup" class="checker-popup">
				<div style="padding:10px 10px 40px 10px;">
					<p style="padding: 5px 5px 5px 2px;color:#888;">角色类型</p>
					<checker
						v-model="activity_type"
						default-item-class="checker-item"
						selected-item-class="checker-item-selected"
						disabled-item-class="checker-item-disabled">
						<checker-item v-for="(item,index) in items" :value="item.value" @on-item-click="onItemClick(item.value)"> {{item.value}} </checker-item>
					</checker>
				</div>
			</popup>
		</div>

		<flexbox>
			<flexbox-item>
				<x-button class="flexBtn_confirm" @click.native="createRole">确定</x-button>
			</flexbox-item>
			<flexbox-item>
				<x-button class="flexBtn_cancel" @click.native="cancel">取消</x-button>
			</flexbox-item>
		</flexbox>
	</div>
</template>

<script>
	import bus from '@/event/eventBus'
	import NetWorking from '../../../utils/networking'
	import {Group, XInput, XTextarea, XButton, Flexbox, FlexboxItem, TransferDom, Popup, Checker, CheckerItem, Cell} from 'vux'

	const URL = 'roles'
	export default {
		name: "new-role",
		components: {
			Group,
			XInput,
			XTextarea,
			XButton,
			Flexbox,
			FlexboxItem,
			TransferDom,
			Popup,
			Checker,
			CheckerItem,
			Cell
		},
		directives: {
			TransferDom
		},
		data() {
			return {
				showPopup: false,
				role_name: '',
				role_description: '',
				items: [{id: 1, value: 'teacher'}, {id: 2, value: 'consultant'}, {id: 3, value: 'admin'}]
			}
		},
		created: function () {
			bus.$emit("barController", 1)
			bus.$emit("setTopSimpleTitle", '新建角色')
		},
		methods: {
			onItemClick (value) {
				this.role_name = value
				this.showPopup = false
			},
			cancel: function () {
				this.$router.go(-1)
			},
			createRole: function () {

				if(this.role_name == '' || this.role_description == ''){
					this.error = "请输入所有必填项"
					return
				}

				NetWorking.doPost(
					URL,
					null,
					{
						role_name: this.role_name,
						role_description: this.role_description
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							this.$router.go(-1)
						}else{
							alert(rs.error_message)
						}
					}
				)
			}
		}
	}
</script>

<style>
	.newRoleDetails {
		border: solid;
		border-color: #f7f7fa;
		margin-left: 5px;
		margin-right: 5px;
		margin-top: 56px;
		box-shadow: 5px 5px 5px #888888;
		border-radius: 25px;
		background-color: white;
	}

	.buttonRole {
		width: 100%;
		margin-top: 15px;
		border-radius: 25px;
	}
</style>